import React, { Component } from 'react';
/*
  学习目标：生命周期 - 更新阶段
  三个阶段
     1. 挂载时
     2. 更新时
     3. 卸载时
*/

// 更新阶段-钩子函数
//    1. render
//    2. componentDidUpdate - 获取更新后的数据，对标Vue中的哪个钩子函数？uupdated

// 触发更新阶段-两种方式
//    1 setState
//    2.🔔props的改变

// 注意：
//    1. 💥setState不能在更新的钩子函数中调用
//    2. 💥React中更新，指的是数据更新，而不是DOM更新

export default class App extends Component {
  state = {
    msg: 'Hello React',
  };

  // 2.2 componentDidUpdate
  // 对标：vue中updated更新后
  // 作用：🔔可以获取到更新后的数据
  // 使用场景：通常用来做缓存
  componentDidUpdate() {
    // console.log('componentDidUpdate更新阶段被触发了  ----->  ');
    console.log('this.state.msg  ----->  ', this.state.msg);
  }

  // 2.1 render
  render() {
    console.log('render被执行了  ----->  ');
    return (
      <div>
        <h1>helloReact</h1>
        <h2>{this.state.msg}</h2>
        <button
          onClick={() => {
            this.setState({ msg: '~' + this.state.msg });
          }}
        >
          点我更新Msg
        </button>
        <Child count={1}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  componentDidUpdate() {
    console.log(' Child -componentDidUpdate更新阶段被触发了  ----->  ');
  }
  render() {
    console.log('Child -render  ----->  ');
    return <div>123</div>;
  }
}
